<template>
    <div class="bi-switch">
    <div class=" form-check form-switch">
        <input class="form-check-input" v-model="value"  type="checkbox">
        <label class="form-check-label" for="flexSwitchCheckDefault">{{text}}</label>
    </div>
    </div>
</template>

<script>
import FieldMixin from '../fieldMixin.js';
export default {
    mixins:[FieldMixin],
    computed:{
        value:{
            get(){
               
                if (this.valueNumber){
                    return parseInt(this.modelValue)==1;
                }else{
                    return this.modelValue;
                }
                
            },
            set(val){

                let value;

                if (this.valueNumber){
                    value = val?1:0;
                }else{
                    value = val;
                }
            
                this.$emit('update:modelValue',value);
                this.$emit('change',value);
                this.valueChange(value);
            }
        },
        id:{
            get(){
                return this.name!=''?this.name:'input' +  Math.random().toString(10).substr(2);
            }
        }
    },
    props:{
        text:{
            type:String,
            default:''
        },
        valueNumber:{
           type:Boolean,
           default:false
        }
    }
}
</script>

<style>
.bi-switch{
    padding: var(--bs-field-padding);
}
.bi-form-row > .form-item > .form-item-content > .bi-switch{
    padding-top: 5px;
}
</style>